<template>
  <div class="price">
    <div class="wrapper" v-for="item in pricesInfo" :key="item.id">
      <van-card
          :title="item.title"
          :thumb="item.pic"
      >
        <template #thumb>
          <div style="width: 100%; height: 100%;">
            <van-image width="80" height="80" :src="item.pic"/>
          </div>
        </template>
        <template #desc>
          <div style="color: #6f6d6d;margin-top: 3px;line-height: 1.3;">{{item.des}}</div>
        </template>
        <template #tags>
          <van-rate v-model="item.start" size="10px" style="position: absolute;bottom: 0;" allow-half readonly/>
        </template>
        <template #price>
          <div>会员价：￥{{item.vipPrice}}</div>
        </template>
        <template #origin-price>
          <div>门面价：￥{{item.price}}</div>
        </template>
        <template #num>
          <div>单位：{{item.unit}}</div>
        </template>
      </van-card>
    </div>
    <div class="end" @click="onClick"> ~~ 想了解更多请点这里 (*^▽^*) ~~</div>
  </div>
</template>

<script>
import {reactive, toRefs} from 'vue'
import {useRouter} from 'vue-router'
//引入图片
import png01 from '../assets/images/price/0-1.jpg'
import png02 from '../assets/images/price/0-2.jpg'
import png03 from '../assets/images/price/0-3.jpg'
import png04 from '../assets/images/price/0-4.jpg'
import png05 from '../assets/images/price/0-5.jpg'
import png06 from '../assets/images/price/0-6.jpg'
import png07 from '../assets/images/price/0-7.jpg'
import png08 from '../assets/images/price/0-8.jpg'
import png09 from '../assets/images/price/0-9.jpg'
import png10 from '../assets/images/price/1-0.jpg'
import png11 from '../assets/images/price/1-1.jpg'
import png12 from '../assets/images/price/1-2.jpg'

export default {
  name: "Price",
  setup() {
    const router = useRouter();
    const state = reactive({
      pricesInfo: [
        {id: 1, title: '油烟机欧式', des:'风轮(涡轮)+涡轮壳滤油网+接油槽+油杯+蒸汽杀菌+外观打蜡', unit:'台', price:'140.0', vipPrice:'120.0', start: 3, pic: png01},
        {id: 2, title: '油烟机中式', des:'风轮(涡轮)+涡轮壳滤油网+接油槽+油杯+蒸汽杀菌+外观打蜡', unit:'台', price:'120', vipPrice:'90', start: 3.5, pic: png02},
        {id: 3, title: '空调挂式', des:'翅片+蒸发器+风轮+排水槽+摆片+过滤网十高湿杀菌十消毒+消，除异味+外观打蜡', unit:'台', price:'100', vipPrice:'80', start: 4.5, pic: png03},
        {id: 4, title: '空调柜式', des:'翅片+蒸发器+风轮+排水槽+摆片+过滤网+高湿杀菌+消毒+消，除异味+外观打蜡', unit:'台', price:'150', vipPrice:'120', start: 3, pic: png04},
        {id: 5, title: '洗衣机波轮', des:'内筒夹壁层+门封条+底盘+滤网+料盒+高温杀菌+Ⅴ8o消毒+外观消毒打蜡', unit:'台', price:'100', vipPrice:'80', start: 3.5, pic: png05},
        {id: 6, title: '洗衣机滚筒', des:'内筒夹壁层+门封条+底盘+滤网+料盒+高温杀菌+Ⅴ8o消毒+外观消毒打蜡', unit:'台', price:'120', vipPrice:'96', start: 3, pic: png06},
        {id: 7, title: '冰箱两开门', des:'专业除冰+消冼托盘+内部+高温蒸汽杀菌+臭氧消毒+消毒+外观清洗打蜡', unit:'台', price:'100', vipPrice:'80', start: 4, pic: png07},
        {id: 8, title: '冰箱对开门', des:'专业除冰+消冼托盘+内部+高温蒸汽杀菌+臭氧消毒+消毒+外观清洗打蜡', unit:'台', price:'120', vipPrice:'96', start: 3.5, pic: png08},
        {id: 9, title: '电热器', des:'60升内除垢+进出水口+杀菌+外观杀菌', unit:'台', price:'100', vipPrice:'90', start: 4, pic: png09},
        {id: 10, title: '地暖', des:'清洗地暖管+排通管道', unit:'组', price:'40/组', vipPrice:'32/组', start: 3.5, pic: png10},
        {id: 11, title: '自来水管', des:'出水口低于10个260元，每多一个加5-20元', unit:'家', price:'260', vipPrice:'220', start: 4.5, pic: png11},
        {id: 12, title: '太阳能', des:'胆内管内除垢按管子收费一般18根左右', unit:'管子', price:'15', vipPrice:'12', start: 5, pic:png12}
      ],
    })
    const onClick = ()=> {
      router.push('/contact');
    }
    return{
      ...toRefs(state),
      onClick
    }
  }
}
</script>

<style lang="less">
  .price{
    height: auto;
    padding-bottom: 50px;
    background-color: #f5f5f5;
    .wrapper{
      margin-bottom: 5px;
    }
    .end{
      height: 30px;
      font-size: 12px;
      color: #999999;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
    }
    .van-card__thumb{
      width: 80px;
      height: 80px;
    }
    .van-card__title{
      font-weight: 600;
    }
    .van-card__content>div:first-child{
      max-height: 65px;
      position: relative;
      height: 65px;
    }
  }
</style>